<template>
  <!-- {{ $route.name }} {{ $route.meta.keepAlive }} -->
  <div class="container" :style="$store.getters['thispage'] ? conStyle : {}">
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :key="$route.name" :is="Component" v-if="$route.meta.keepAlive" />
      </keep-alive>
      <component :key="$route.name" :is="Component" v-if="!$route.meta.keepAlive" />
    </router-view>
  </div>
  <van-tabbar
    v-if="$store.getters['thispage']"
    route
    active-color="#026141"
    inactive-color="#4E5969"
    @change="handleTabClick"
  >
    <van-tabbar-item to="/home" replace>
      <span>首页</span>
      <template #icon="props">
        <img :src="getAssetsImages1(props.active ? icon[0].active : icon[0].inactive)" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/demand" replace>
      <span>需求</span>
      <template #icon="props">
        <img :src="getAssetsImages1(props.active ? icon[1].active : icon[1].inactive)" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item class="scan-icon">
      <template #icon>
        <img :src="getAssetsImages1('tabbar/scan.png')" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/product" replace>
      <span>生产</span>
      <template #icon="props">
        <img :src="getAssetsImages1(props.active ? icon[2].active : icon[2].inactive)" />
      </template>
    </van-tabbar-item>
    <van-tabbar-item to="/user" replace>
      <span>我的</span>
      <template #icon="props">
        <img :src="getAssetsImages1(props.active ? icon[3].active : icon[3].inactive)" />
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>
<script>
import { getAssetsImages } from '@/utils'
import { reactive, toRefs, onBeforeMount } from 'vue'
import { getSign } from '@/utils/jssdk'
import * as ww from '@wecom/jssdk'
export default {
  setup() {
    const getAssetsImages1 = getAssetsImages
    const conStyle = {
      height: 'calc(100vh - 50px)',
      overflow: 'auto'
    }
    const state = reactive({
      barcode: '',
      loading: false
    })
    const icon = [
      { active: 'tabbar/home-hover.png', inactive: 'tabbar/home.png' },
      { active: 'tabbar/demand-hover.png', inactive: 'tabbar/demand.png' },
      { active: 'tabbar/product-hover.png', inactive: 'tabbar/product.png' },
      { active: 'tabbar/user-hover.png', inactive: 'tabbar/user.png' }
    ]
    onBeforeMount(() => {
      getSign()
    })
    const handleTabClick = (e) => {
      // e==2 即scan
      if (e == 2) {
        scanCode()
      }
    }
    const scanCode = () => {
      ww.scanQRCode({
        needResult: 1, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果
        scanType: ['qrCode', 'barCode'],
        success: function (res) {
          // 当needResult为1时返回处理结果
          const resultStr = res.resultStr
          resultStr.split('&').map((item) => {
            if (item.indexOf('barcode') > -1) {
              state.barcode = item.split('=')[1]
            }
          })
        },
        fail: function (err) {
          state.loading = false
          if (err.errMsg.includes('scanQRCode: fail cancel')) {
            console.log('用户取消了扫描')
            // 用户取消扫描时的处理逻辑
          } else {
            console.log('扫描失败', err)
            // 其他扫描失败的处理逻辑
          }
        }
      })
    }
    return {
      icon,
      conStyle,
      handleTabClick,
      getAssetsImages1
    }
  }
}
</script>
<style lang="less" scoped>
.scan-icon {
  :deep(.van-tabbar-item__icon) {
    top: -23px;
    z-index: 10;
    img {
      height: 56px;
    }
  }
}
</style>
